<template>
  <view class="list-container">
    <uni-datetime-picker v-model="range" type="daterange" @change="maskClick">
      <view v-if="range.length < 1" class="time"> 请选择日期 </view>
      <view v-else class="time">
        <view class="time-btn">{{ range[0] }}</view>
        <view>~</view>
        <view class="time-btn">{{ range[1] }}</view>
      </view>
    </uni-datetime-picker>
    <uv-empty
      v-if="isNotEmpty"
      mode="list"
      :icon="empty"
      width="220"
    ></uv-empty>
    <uv-cell
      :title="`区间统计推广订单：${item.num}单`"
      clickable
      v-for="(item, index) in list"
      :key="index"
    >
      <template v-slot:value>
        <uv-text
          type="info"
          size="20"
          align="right"
          :text="`￥${item.totalmoney}`"
        ></uv-text>
      </template>
    </uv-cell>
  </view>
</template>

<script setup>
import { ref } from "vue";
// import { channelUserCount } from '@/api/setting'
import empty from "@/static/empty.png";
import { getCurrentInstance } from "vue";

const { appContext } = getCurrentInstance();
const REQUEST = appContext.config.globalProperties.$http;

const props = defineProps({
  pid: {
    type: String,
    default: undefined,
  },
  type: {
    type: String,
    default: "month",
  },
});

const list = ref(undefined);
const range = ref([]);
const loading = ref(false);
const isNotEmpty = ref(true);
const getChannelUserCount = async () => {
  loading.value = true;
  const params = {
    page: 1,
    pid: props.pid,
    type: props.type,
    start: range.value[0],
    end: range.value[1],
  };
  REQUEST.http("masterchannel/index/channelOrderCount", params, "POST").then(
    (res) => {
      data.value = res.data;
      loading.value = false;
      isNotEmpty.value = false;
    }
  );
};
const maskClick = (e) => {
  range.value = e;
  getChannelUserCount();
};
</script>

<style lang="scss" scoped>
.list-container {
  height: calc(100% - 44px - 61px);
  overflow: scroll;
}
.time {
  color: #fff;
  border-radius: 3px;
  background-color: #3c9cff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 12px;
  height: 30px;
  &-btn {
    min-width: 30px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
